// 学习三个新的react-router-dom里面的组件
// 使用新的切换视图标签:NavLink,
// 使用组件实现重定向, Redirect
// 使用组件实现提高路由匹配效率:Switch
import React from 'react';
import Home from './components/Home';
import Detail from './components/Detail';
import XXX from './components/xxx';
import { Route, Redirect, NavLink, Switch } from 'react-router-dom';

export default function App() {
  return (
    <div>
      App123
      <hr />
      <NavLink to="/Home">
        {/* <NavLink to="/Home" activeClassName={'xxxx'} className="active"> */}
        Home
      </NavLink>
      <hr />
      <NavLink to="/Detail">Detail</NavLink>
      <hr />
      <hr />
      <hr />
      <hr />
      <hr />
      <hr />
      <hr />
      <hr />
      {/* 找出冲突,当pathname输入的时/home的时候,home组件会被new两次,如下测试 */}
      <Route path="/" component={Home}></Route>
      <Route path="/Home" component={Home}></Route>
      <Route path="/Detail" component={Detail}></Route>
      {/* 原因:1pathname去跟path路径匹配的时候,使用模糊匹配,pathname按照"/"来划分,能分为两段
      /Home能跟"/"匹配 ,完了之后还能继续和"/Home" 匹配
      所以导致Home组件被new了两次*/}
      <hr />
      <hr />
      <hr />
      <hr />
    </div>
  );
}
